<template>
    <div style="width:100%">
        <div style="width:100%">
            <div id="linezhetotal" style="width:100%;height:200px;top:-15px;"></div>
        </div>
    </div>
</template>
  
<script>
export default {
    components: {},
    props: {},
    data() {
        return {
        };
    },
    watch: {},
    computed: {},
    methods: {
        init() {
            let mychart = this.$echarts.init(document.getElementById("linezhetotal"));
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '25%',
                    left: '10%',
                    right: '5%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap:false,
                    axisLine: {
                        lineStyle: {
                            color: 'white'

                        }
                    },
                    axisLabel: {
                        // interval: 0,
                        // rotate: 40,
                        textStyle: {
                            fontFamily: 'Microsoft YaHei'
                        }
                    },
                    splitLine: {
                      show: true,
                      lineStyle: {
                        color: 'rgba(255,255,255,0.3)'
                      }
                    },                    
                    data: ['2022.5', '2022.6', '2022.7', '2022.8', '2022.9', '2022.10','2022.11','2022.12','2023.1','2023.2','2023.3','2023.4'],

                }],

                yAxis: [{
                    name: '单位：(万支)',
                    type: 'value',
                    min: 0,
                    max: 200,
                    splitNumber: 4,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: 'white'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',

                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [
                    {
                        name: '',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 10,
                        lineStyle: {
                            normal: {
                                color: "#2CABE3",
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#2CABE3',
                            }
                        },
                        itemStyle: {
                            color: "#fff",
                            borderColor: "#2CABE3",
                            borderWidth: 2,
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgba(81,150,164,0.3)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(81,150,164,0)'
                                    }
                                ], false),
                            }
                        },
                        data: ["136.64", "90.36", "89.72", "105.08", "114.1","175.68", "81.5", "25.08", '136.7','73.96','124.04','60.16']

                    },
                ]
            };



            mychart.setOption(option)
        },
    },
    created() { },
    mounted() {
        this.init()
    }
};
</script>
<style lang="scss" scoped></style>